<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      lang="en">
<head>
    <meta charset="utf-8">
    <title>deliverGoods</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css" media="all"/>
</head>
<body>

<div class="layui-form">
    <input type="hidden" th:value="${itemId}" name="itemId" id="itemId">
    <div class="layui-inline">
        <label class="layui-form-label">上货数量</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="num" autocomplete="off" class="layui-input" lay-verify="number" placeholder="请输入数量">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">机器货道</label>
        <div class="layui-input-inline" style="width: 500px;">
            <input type="radio" name="lineSort" value="1" title="货道 1" >
            <input type="radio" name="lineSort" value="2" title="货道 2" >
            <input type="radio" name="lineSort" value="3" title="货道 3" >
            <input type="radio" name="lineSort" value="4" title="货道 4" >
            <input type="radio" name="lineSort" value="5" title="货道 5" >
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="deliverForm">保存</button>
    </div>
</div>

<table class="layui-hide" id="allMachine" lay-filter="allMachineTableFilter"></table>

<script type="text/html" id="toolbar">

</script>

<script src="/admin/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table','jquery','element','form','layer'], function() {
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , element = layui.element;


        table.render({
            elem: '#allMachine'
            ,url:'/machine/getAllMachine'
            // ,toolbar: '#toolbar'
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,title: '用户数据表'
            ,limit:20
            ,totalRow:true
            ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                [
                    {type: 'checkbox', fixed: 'left'}
                    // {radio: true, LAY_CHECKED: false} //默认全选
                    ,{field:'machineId', title:'机器IMEI码', width:200, unresize: true, align:'center'}
                    ,{field:'status', title:'机器状态', width:200, unresize: true, align:'center',templet:function(res){
                        if(res.status == 1){
                            return "正常"
                        }else{
                            return "故障"
                        }
                    }}
                    ,{field:'errorCode',title:'故障信息',width:200,unresize:true,align:'center',templet:function (res) {
                        if(res.status == 1){
                            return "无故障";
                        }
                        if(res.errorCode == '001'){
                            return "电机故障";
                        }else if(res.errorCode == '002'){
                            return "光眼故障";
                        }
                    }}
                    ,{field:'createDatetime', title:'创建时间', width:200,align:'center',sort:true}
                ]]
            ,page: true,id:'allMachineTable'
        });


        // table.on('radio(allMachineTableFilter)', function(obj){
        //     console.log(obj.checked); //当前是否选中状态
        //     console.log(obj.data); //选中行的相关数据
        //     console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        // });

        table.on('checkbox(allMachineTableFilter)', function(obj){
            var data = obj.data;
            var isChecked = obj.checked;
            var type = obj.type;
            if(type = 'one' && isChecked){
                $.ajax({
                    type:'post',
                    url:'/product/checkGood',
                    data:{itemId:$("#itemId").val(),machineId:data.machineId},
                    async:false,
                    success:function (res) {
                        if(res.data){
                            var line = res.data.tChannelId;
                            var index =parseInt(line.charAt(line.length-1))-1;
                            layer.msg("机器中存在: {商品数量：" + res.data.productNum + ";  货道：" + line.charAt(line.length - 1)+" }",{icon:6});
                            $("input:radio[name=lineSort]").eq(index).prop('checked',true);
                            form.render('radio');
                        }else{
                        }
                    },
                    error:function (error) {
                        layer.msg(error.state);
                    }


                })
            }

            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });


        form.on('submit(deliverForm)', function(data){
            var checkedBox = table.checkStatus('allMachineTable');
            var checkedData = checkedBox.data;      //获取选中的数据
            console.log(checkedData);
            if(checkedData.length > 1 || checkedData.length < 1){
                layer.alert("请选中一种商品进行上货",{icon:0});
                return;
            }
            var itemId = data.field.itemId;
            var num = data.field.num;
            var machineId = checkedData[0].machineId;
            var line = data.field.lineSort;
            var lineSort =  machineId+"_"+data.field.lineSort;
            console.log("itemId="+itemId);
            console.log("num="+num);
            console.log("lineSort="+lineSort);
            console.log("machineId="+machineId);
            if(!num || !line){
                layer.alert("请填写完整商品上货信息",{icon:2});
                return false;
            }
            $.ajax({
                type: "POST",
                url: '/machine/deliverGood',
                async:false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                data:{
                    itemId: itemId,
                    num:num,
                    lineSort:lineSort,
                    machineId:machineId
                },
                success: function(result) {
                    console.log(result);
                    if(result.status == 200){
                        layer.alert("上货成功!",{icon:1},function () {
                            //假设这是iframe页
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    }else{
                        layer.alert(result.message);
                    }
                },
                error: function(error) {
                    alert(error.status);
                }
            });
            return false;
        });
    })

</script>

</body>
</html>